<template>
	<view class="container">
		<!-- 搜索头部 -->
		<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-fixed="true" :is-back="false" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="left-item" @click="toPosition">
					<image src="../../static/image/loc/myloc.png" mode="widthFix"></image>
					<text>{{getCity}}</text>
				</view>
				<view class="search-wrap" @click="onFocus">
					<u-search :placeholder="placeholder" @search="onSearch" :animation="true" v-model="keyword" bg-color="#fff" border-color="transparent" :show-action="showAction" :focus="false"  height="56"></u-search>
				</view>
<!--				<view class="navbar-right" >-->
<!--					<view class="message-box right-item">-->
<!--						<view class="t-icon custom-t-icon-fuli"></view>-->
<!--						<u-badge count="3" size="mini" :offset="[-15, -15]"></u-badge>-->
<!--					</view>-->
<!--					<view class="right-item">-->
<!--						<view class="t-icon custom-t-icon-morentouxiang"></view>-->
<!--						<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>-->
<!--					</view>-->
<!--				</view>-->
			</view>
		</u-navbar>


		<!-- 广告Bannner -->
		<u-swiper :list="bannerList" :effect3d="true"></u-swiper>
		<!-- 宫格菜单 -->
		<u-grid :col="5" :border="false">
			<u-grid-item v-for="(item,index) in gridMenu" @tap="Navigate(item)" :key="index">
				<view class="u-text-center">
					<view :class="'t-icon custom-t-icon-'+item.icon"></view>
					<view class="">
						{{item.name}}
					</view>
				</view>
			</u-grid-item>
		</u-grid>
		
		<!-- 附近景点推荐 -->
		<view class="nearby-scenic" v-if="nearbyScenicList.length > 0">
			<view class="section-header">
				<view class="section-title">
					<text class="title-icon">📍</text>
					<text class="title-text">附近景点推荐</text>
				</view>
				<view class="more-btn" @click="toScenicList">
<!--					<text>查看更多</text>-->
<!--					<text class="arrow">›</text>-->
				</view>
			</view>
			
			<view class="scenic-list">
				<view 
					class="scenic-card" 
					v-for="(item, index) in nearbyScenicList" 
					:key="item.id"
					@click="toScenicDetail(item)"
				>
					<image 
						class="scenic-image" 
						:src="item.image || 'https://picsum.photos/400/300?random=' + index" 
						mode="aspectFill"
					></image>
					<view class="scenic-info">
						<view class="scenic-title">{{ item.title }}</view>
						<view class="scenic-desc">{{ item.keywords || item.info }}</view>
						<view class="scenic-meta">
							<view class="meta-item">
								<text class="rate-icon">⭐</text>
								<text class="rate-text">{{ item.rate || '4.5' }}</text>
							</view>
							<view class="meta-item">
								<text class="view-icon">👁</text>
								<text>{{ formatCount(item.visit_count) }}</text>
							</view>
							<view class="meta-item price">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{ item.price || '免费' }}</text>
							</view>
						</view>
						<view class="scenic-location">
							<text class="location-icon">📍</text>
							<text class="location-text">{{ item.district }} · {{ item.distance }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提示框 -->
		<u-toast ref="uToast" />
		<!-- 切换城市显示推荐列表 -->
		<citynav @change="changeNav" :list="citylist"></citynav>
		<!-- #ifndef H5 -->
		<!-- H5端禁用返回顶部按钮，避免DOM访问错误 -->
		<u-back-top 
		:scrollTop="scrollTop" 
		:icon-style="iconStyle"
		:custom-style="customStyle"
		ref="backtop"
		></u-back-top>
		<!-- #endif -->
  </view>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
import citynav from './components/citynav.vue'
	export default {
		data() {
			return {
				hasLogin:false,//已经登录
				right: false,
				showAction: false,
				background:{
					backgroundColor:'#fff'
				},
				keyword: '',
				placeholder:'搜索目的地/景点/酒店等',
				bannerList:[
					{image:'https://picsum.photos/600/400?nature,random=7',href:''},
					{image:'https://picsum.photos/600/400?nature,random=6',href:''},
					{image:'https://picsum.photos/600/400?nature,random=3',href:''}
				],//广告轮播图
				// hotKeyword:['广元','国庆小众旅游','达古冰川','酒店民宿','古城'],//热搜关键词
				gridMenu:[
					{icon:'ziyuan3',name:'门票'},
					{icon:'ziyuan4',name:'温泉'},
					// {icon:'ziyuan13',name:'自由行'},
					// {icon:'qinziyou',name:'亲子游'},
					// {icon:'jingneiyou',name:'境内游'},
					{icon:'canshi',name:'美食'},
					{icon:'jiudian1',name:'住宿',url:'../hotel/index'},
					// {icon:'jiaotong',name:'交通'},
					// {icon:'gouwu',name:'购物'},
					// {icon:'hangban',name:'航班'}
				],
				// citylist: [
				// 	{name: '推荐',id:1},
				// 	{name: '北京',id:2},
				// 	{name: '上海',id:3},
				// 	{name: '广州',id:4},
				// 	{name: '深圳',id:5},
				// 	{name: '成都',id:6},
				// 	{name: '重庆',id:7},
				// 	{name: '杭州',id:8},
				// 	{name: '西安',id:9},
				// 	{name: '南京',id:10},
				// 	{name: '武汉',id:11},
				// 	{name: '郑州',id:12},
				// 	{name: '长沙',id:13},
				// 	{name: '厦门',id:14},
				// 	{name: '青岛',id:15},
				// 	{name: '大连',id:16},
				// 	{name: '昆明',id:17},
				// 	{name: '丽江',id:18},
				// 	{name: '三亚',id:19},
				// 	{name: '桂林',id:20},
				// 	{name: '苏州',id:21},
				// 	{name: '天津',id:22},
				// 	{name: '哈尔滨',id:23},
				// 	{name: '保定',id:24},
				// ],
				scrollTop:0,
				iconStyle:{
					fontSize: '32rpx',
					color: '#fff',
				},
				customStyle:{
					background:'#ffda33'
				},
				currentCity:'',
				nearbyScenicList: [], // 附近景点列表
			}
		},
		components:{
			citynav
		},
		mounted() {
			this.$nextTick(()=>{
				// 自动定位，不打开地图选择界面（定位成功后会自动调用 getNearbyScenicList）
				this.autoLocation();
				this.getPromotion();
			})
		},
		beforeDestroy() {
			// 清理操作，避免内存泄漏
			try {
				uni.hideLoading();
			} catch (e) {
				console.log('清理loading失败', e);
			}
		},
		onShow() {
			// 页面显示时检查位置是否更新（从地图页面返回时）
			const location = this.getLocation;
			if (location && location.latitude && location.longitude) {
				// 如果位置信息存在，刷新附近景点列表
				console.log('页面显示，检测到位置信息，刷新附近景点', location);
				this.getNearbyScenicList();
			}
		},
		onLoad(){
			// uni.startPullDownRefresh();
      //先从缓存读取已选择的城市
      const cachedCity = uni.getStorageSync('currentCity');
      if (cachedCity) {
        this.currentCity = cachedCity;
      } else {
        //缓存无数据时，再用默认值“河北科技学院-图书馆”
        this.currentCity = '北京'
      }
      //执行刷新城市列表的逻辑（使用currentCity而非固定的“北京”）
      this.refreshList(this.currentCity);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom(){
			// console.log('底部')
			this.getList(this.currentCity);
		},
		// 下拉刷新
		onPullDownRefresh(){
		    // console.log('refresh');
			setTimeout(()=>{
				this.refreshList();
				uni.stopPullDownRefresh();
				this.$refs.uToast.show({
					title: '已更新',
					type: 'success',
				})
			}, 1000);
		},
		computed:{
			...mapGetters(['getCity','getLocation']),
		},
		methods: {
			...mapActions('home',['getList','refreshList']),
			...mapActions(['setCity']),
			...mapActions(['setLocation']),
			// 促销 - 获取轮播图数据
			getPromotion(){
				this.$api.getPromotion().then(res=>{
					console.log("促销数据", res);
					if(res.data && res.data.code === 200 && res.data.data){
						const promotions = res.data.data;
						// 转换为轮播图格式
						this.bannerList = promotions.map(item => ({
							image: item.bannerUrl || 'https://picsum.photos/600/400?nature,random=' + item.id,
							href: item.id ? `/pages/index/detail?id=${item.id}` : '',
							title: item.title || ''
						}));
					} else {
						// 如果后端没有数据，使用默认轮播图
						console.log("使用默认轮播图");
					}
				}).catch(err => {
					console.error("获取促销数据失败", err);
					// 使用默认轮播图
				})
			},
			// 切换城市
		changeNav(index){
			this.currentCity = this.citylist[index].name;
			this.setCity(this.currentCity);
			this.refreshList(this.currentCity);
		},
			// 跳转
			Navigate(item){
				if(item.url){
					uni.navigateTo({
						url:item.url,
					})
				}
			},
			onSearch(){
				// console.log(this.keyword)
			},
			onFocus(){
			uni.navigateTo({
				url:"/pages/search/index"
			})
		},
			// 自动定位（不打开地图选择界面）- 实时定位
	autoLocation(){
		console.log('开始自动定位...');
	
	// #ifdef H5
	console.log('H5端定位 - 当前协议:', window.location.protocol);
	console.log('H5端定位 - 当前域名:', window.location.hostname);
	// #endif
	
	uni.showLoading({
		title: '定位中...',
		mask: true
	});
		
		// 构建定位配置
		const locationConfig = {
			type: 'gcj02',
			// #ifdef APP-PLUS || MP-WEIXIN
			altitude: true,
			geocode: true,
			isHighAccuracy: true,
			// #endif
			// #ifdef H5
			// H5端定位配置
			timeout: 10000, // 10秒超时
			// #endif
		};
		
		console.log('定位配置:', locationConfig);
		
		uni.getLocation({
      type: 'gcj02',
			...locationConfig,
			success: (res) => {
				console.log('实时定位成功，原始数据:', res);
        console.log('定位结果', res);
				// 存储位置信息
				this.setLocation({
					latitude: res.latitude,
					longitude: res.longitude
				});
				
				let city = '';
				
				// #ifdef APP-PLUS || MP-WEIXIN
				// APP和小程序可以直接从定位结果获取地址
				if (res.address) {
					city = this.extractCityFromAddress(res.address, res.latitude, res.longitude);
				} else if (res.city) {
					city = res.city.replace(/市/g, '');
				}
				
				if (!city) {
					city = '北京'; // 默认城市
					console.warn('⚠️ APP/小程序定位未获取到城市，使用默认值:', city);
				}
				uni.hideLoading();
				
				if (city) {
					this.setCity(city);
					this.currentCity = city;
          uni.setStorageSync('currentCity',city)
					this.getList(city);
					this.getNearbyScenicList(); // 获取附近景点
					uni.showToast({
						icon: 'success',
						title: '定位成功：' + city,
						duration: 2000
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '无法获取城市信息，请手动选择位置',
						confirmText: '选择位置',
						success: (modalRes) => {
							if (modalRes.confirm) {
								this.toPosition();
							}
						}
					});
				}
				// #endif
				
				// #ifdef H5
				// H5端需要通过逆地理编码API获取地址信息
				const amapKey = '394d02ccf2229093a00a153594a8011d';
        uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${res.longitude},${res.latitude}&extensions=base`,
					success: (amapRes) => {
						uni.hideLoading();
						console.log('🗺️ 高德逆地理编码结果', amapRes);
            					if (amapRes.data && amapRes.data.regeocode && amapRes.data.regeocode.addressComponent) {
						const addressComponent = amapRes.data.regeocode.addressComponent;
						const formattedAddress = amapRes.data.regeocode.formatted_address || '';
						
						console.log('📍 地址组件:', addressComponent);
						console.log('📍 格式化地址:', formattedAddress);
						
						let city = '';
						
						// 优先使用addressComponent中的city字段
						// 比如北京是直辖市，addressComponent.city可能为空，需取province
						city = addressComponent.city || addressComponent.province || '';
						
						// 去除"市"字（如"北京市"→"北京"）
						if (city) {
							city = city.replace(/市/g, '');
						}
						
						// 如果addressComponent没有正确的city，尝试从格式化地址中提取
						if (!city && formattedAddress) {
							console.log('⚠️ addressComponent无城市，从格式化地址提取');
							city = this.extractCityFromAddress(formattedAddress, res.latitude, res.longitude);
						}
						
						// 增加兜底：若解析失败，使用默认城市
						if (!city) {
							city = '北京'; // 默认城市
							console.warn('⚠️ 高德逆地理编码未解析到城市名，使用默认城市：', city);
						}
						
						console.log('🏙️ 最终城市:', city);
						
						this.setCity(city);
						this.currentCity = city;
						uni.setStorageSync('currentCity', city);
						this.getList(city);
						// 获取附近景点
						this.getNearbyScenicList();
						uni.showToast({
							icon: 'success',
							title: '定位成功：' + city,
							duration: 2000
						});
					} else {
						this.showLocationModal();
					}  
					},
					fail: (amapErr) => {
						uni.hideLoading();
						console.error('高德API调用失败', amapErr);
						// uni.showModal({
						// 	title: '提示',
						// 	content: '无法获取城市信息，请手动选择位置',
						// 	confirmText: '选择位置',
						// 	success: (modalRes) => {
						// 		if (modalRes.confirm) {
						// 			this.toPosition();
						// 		}
						// 	}
						// });
            this.showLocationModal();
					}
				});
				// #endif
			},
			fail: (err) => {
				uni.hideLoading();
				console.error("实时定位失败，完整错误信息:", err);
				console.error("错误消息:", err.errMsg);
				console.error("错误码:", err.errCode);
				
				let errorMsg = '定位失败';
				let errorDetail = '';
				
				if (err.errMsg) {
					console.log('错误类型判断:', err.errMsg);
					if (err.errMsg.includes('auth deny') || err.errMsg.includes('permission') || err.errMsg.includes('denied')) {
						errorMsg = '定位权限被拒绝';
						// #ifdef H5
						errorDetail = '浏览器需要HTTPS或localhost才能使用定位功能';
						// #endif
						// #ifndef H5
						errorDetail = '请在设置中开启定位权限';
						// #endif
					} else if (err.errMsg.includes('timeout')) {
						errorMsg = '定位超时';
						errorDetail = '请检查网络连接后重试';
					} else if (err.errMsg.includes('fail')) {
						errorMsg = '定位服务不可用';
						// #ifdef H5
						errorDetail = '请确保：\n1. 使用HTTPS或localhost访问\n2. 浏览器支持定位功能\n3. 已允许浏览器定位权限';
						// #endif
					}
				}
				
				const content = errorDetail ? `${errorMsg}\n${errorDetail}\n\n请手动选择位置` : `${errorMsg}，请手动选择位置`;
				
				uni.showModal({
					title: '定位失败',
					content: content,
					confirmText: '选择位置',
					cancelText: '取消',
					success: (modalRes) => {
						if (modalRes.confirm) {
							this.toPosition();
						}
					}
				});
			}
		});
	},
			// 点击定位按钮 - 打开位置选择界面（手动选择）
	toPosition(){
		// 获取上一次选择的位置（如果存在）
		const lastLocation = this.getLocation;
		const locationConfig = {};
		
		// 如果有上一次的位置，就从那个位置开始选择
		if (lastLocation && lastLocation.latitude && lastLocation.longitude) {
			locationConfig.latitude = lastLocation.latitude;
			locationConfig.longitude = lastLocation.longitude;
			console.log('从上一次的位置开始选择:', lastLocation);
		}
		
		// 打开位置选择界面
		uni.chooseLocation({
			...locationConfig,
			success: (res) => {
				console.log('✅ 选择位置成功', res);
				console.log('📍 位置详情 - 名称:', res.name, '地址:', res.address);
				
				// 存储位置信息
				this.setLocation({
					latitude: res.latitude,
					longitude: res.longitude
				});
				
				// 智能提取城市名
				let city = this.extractCityFromAddress(res.address, res.latitude, res.longitude);
				
				console.log('🏙️ 提取的城市:', city);
				
				// 存储城市信息
				this.setCity(city);
				this.currentCity = city;
				uni.setStorageSync('currentCity', city);
				this.getList(city);
				
				// 重新获取附近景点（基于新的经纬度）
				this.getNearbyScenicList();
				
				uni.showToast({
					icon: 'success',
					title: '已选择：' + (res.name || city),
					duration: 2000
				});
			},
			fail: (err) => {
				console.error("选择位置失败", err);
				uni.showToast({
					title: '选择位置失败',
					icon: 'none'
				});
			}
		});
	},
			recommend(){
				this.getList(this.currentCity);
				// this.$api.recommend({
				// 	lat:this.getLocation.latitude,
				// 	lng:this.getLocation.longitude,
				// 	distance:5000,
				// 	pageSize:15
				// }).then(res=>{
				// 	console.log("recommend",res)
				// 	this.getList()
				// })
			},
			recommendcity(){
			// this.$api.recommendcity({
			// 	cityName:this.getCity
			// }).then(res=>{
			// 	console.log("recommendcity",res)
			// })
		},
		// 显示手动选择位置的弹窗
	showLocationModal(){
		uni.showModal({
			title: '提示',
			content: '无法获取城市信息，请手动选择位置',
			confirmText: '选择位置',
			cancelText: '取消',
			success: (modalRes) => {
				if (modalRes.confirm) {
					this.toPosition();
				}
			}
		});
	},
	
	// 智能提取城市名（改进版）
	extractCityFromAddress(address, latitude, longitude) {
		if (!address) {
			console.warn('⚠️ 地址为空，使用默认城市');
			return '北京';
		}
		
		console.log('🔍 正在解析地址:', address);
		
		let city = '';
		
		// 方法1: 优先匹配 "省XXX市" 格式，提取市级名称
		// 例如："河北省保定市易县狼牙山镇" -> "保定"
		const provincePattern = /[^省]+省([^市]+市)/;
		const provinceMatch = address.match(provincePattern);
		if (provinceMatch && provinceMatch[1]) {
			city = provinceMatch[1].replace(/市/g, '');
			console.log('✓ 方法1匹配成功 (省-市):', city);
			return city;
		}
		
		// 方法2: 匹配直辖市 "XXX市"
		// 例如："北京市东城区" -> "北京"
		const directCityPattern = /^([^省]+市)/;
		const directMatch = address.match(directCityPattern);
		if (directMatch && directMatch[1]) {
			city = directMatch[1].replace(/市/g, '');
			console.log('✓ 方法2匹配成功 (直辖市):', city);
			return city;
		}
		
		// 方法3: 匹配 "XXX省" （无市级，如海南省某县）
		const provinceOnlyPattern = /^([^省]+省)/;
		const provinceOnlyMatch = address.match(provinceOnlyPattern);
		if (provinceOnlyMatch && provinceOnlyMatch[1]) {
			city = provinceOnlyMatch[1].replace(/省/g, '');
			console.log('✓ 方法3匹配成功 (仅省):', city);
			return city;
		}
		
		// 方法4: 如果以上都不匹配，尝试分割地址
		// 按照 "省|市|区|县|镇|乡|村" 分割
		const parts = address.split(/省|市|区|县|镇|乡|村/);
		console.log('🔎 地址分割结果:', parts);
		
		// 如果有多个部分，第二个通常是市级名称
		if (parts.length >= 2 && parts[1]) {
			city = parts[1].trim();
			console.log('✓ 方法4匹配成功 (分割):', city);
			return city;
		}
		
		// 如果第一个部分非空，使用第一个部分
		if (parts.length > 0 && parts[0]) {
			city = parts[0].trim();
			console.log('✓ 使用第一部分:', city);
			return city;
		}
		
		// 兜底：使用默认城市
		console.warn('⚠️ 无法从地址中提取城市，使用默认值');
		return '北京';
	},
	
	// 获取附近景点列表
	async getNearbyScenicList() {
		try {
			const location = this.getLocation; // 从Vuex状态中读取定位结果（经纬度）
			
			if (!location || !location.latitude || !location.longitude) {
				console.log('⚠️ 暂无定位信息，使用模拟数据');
				this.loadMockScenicData();
				return;
			}
			
			console.log('📍 开始获取附近景点');
			console.log('📌 当前位置:', {
				纬度: location.latitude,
				经度: location.longitude,
				城市: this.getCity || this.currentCity
			});
			
			// 调用后端API获取附近景点（扩大搜索半径到150公里）
			const res = await this.$api.getNearbyScenicList({
				latitude: location.latitude,
				longitude: location.longitude,
				radius: 50 // 搜索半径（公里）- 从50扩大到150，确保能覆盖更广范围
			});
			
			console.log('✅ API返回结果:', res);
			console.log('📊 返回数据详情:', JSON.stringify(res, null, 2));
			
			// 判断返回数据结构
			if (res && res.data) {
				let scenicData = [];
				
				// 兼容不同的返回格式
				if (res.data.code === 200 && res.data.data) {
					scenicData = res.data.data;
				} else if (Array.isArray(res.data)) {
					scenicData = res.data;
				} else if (res.data.list) {
					scenicData = res.data.list;
				}
				
				if (scenicData && scenicData.length > 0) {
					console.log(`🎉 找到 ${scenicData.length} 个附近景点`);
					// 计算每个景点的距离并转换字段名
					this.nearbyScenicList = scenicData.map(item => {
						const distance = this.calculateDistance(
							location.latitude,
							location.longitude,
							parseFloat(item.latitude),
							parseFloat(item.longitude)
						);
						
						console.log(`📍 景点: ${item.title}, 距离: ${distance.toFixed(1)}km`);
						
						// 转换后端字段名到前端期望的格式
						return {
							id: item.id,
							title: item.title,
							keywords: item.keywords,
							info: item.intro || item.keywords, // intro → info
							district: item.district,
							price: item.price,
							rate: item.rate || 4.5,
							visit_count: item.visitCount || 0, // visitCount → visit_count
							image: item.href || `https://picsum.photos/400/300?random=${item.id}`,
							latitude: item.latitude,
							longitude: item.longitude,
							distance: distance < 1 ? `${(distance * 1000).toFixed(0)}m` : `${distance.toFixed(1)}km`
						};
					});
					console.log('✅ 附近景点列表加载成功:', this.nearbyScenicList.length + '个');
				} else {
					console.log('⚠️ API返回数据为空，使用模拟数据');
					console.log('❗ 可能的原因：');
					console.log('  1. 数据库中没有附近景点数据');
					console.log('  2. 搜索半径内没有景点（当前半径：50公里）');
					console.log('  3. 后端API查询失败');
					console.log('💡 建议：检查数据库中是否有白石山等保定景点数据');
					this.loadMockScenicData();
				}
			} else {
				console.log('❌ API调用失败，使用模拟数据');
				console.log('返回数据结构异常:', res);
				this.loadMockScenicData();
			}
			
		} catch (error) {
			console.error('❌ 获取附近景点失败:', error);
			console.error('错误详情:', error.message);
			// API调用失败时，降级使用模拟数据
			console.log('🔄 降级使用模拟数据');
			this.loadMockScenicData();
		}
	},
	
	// 模拟数据（在API准备好之前使用）
	loadMockScenicData() {
		const currentCity = this.getCity || this.currentCity || '';
		console.log(`🎭 加载模拟数据，当前城市: ${currentCity}`);
		
		// 根据当前城市返回不同的模拟数据
		if (currentCity.includes('保定')) {
			// 保定地区景点
			this.nearbyScenicList = [
				{
					id: 101,
					title: '白石山',
					keywords: '世界地质公园·大理岩峰林',
					info: '白石山拥有全国独一无二的大理岩峰林地貌，被誉为"北方第一奇山"',
					district: '涞源县',
					price: 135,
					rate: 4.8,
					visit_count: 128900,
					distance: '148km',
					image: 'https://picsum.photos/400/300?random=16'
				},
				{
					id: 102,
					title: '野三坡',
					keywords: '自然风光·地质公园',
					info: '以"雄、险、奇、幽"的自然景观而闻名',
					district: '涞水县',
					price: 115,
					rate: 4.6,
					visit_count: 89200,
					distance: '85km',
					image: 'https://picsum.photos/400/300?random=12'
				},
				{
					id: 103,
					title: '白洋淀',
					keywords: '湿地生态·水乡风情',
					info: '华北地区最大的淡水湖泊，有"华北明珠"之称',
					district: '安新县',
					price: 40,
					rate: 4.4,
					visit_count: 67800,
					distance: '45km',
					image: 'https://picsum.photos/400/300?random=11'
				}
			];
		} else {
			// 默认北京地区景点
			this.nearbyScenicList = [
				{
					id: 1,
					title: '故宫博物院',
					keywords: '历史文化·皇家宫殿',
					info: '中国明清两代的皇家宫殿',
					district: '东城区',
					price: 60,
					rate: 4.8,
					visit_count: 125800,
					distance: '2.3km',
					image: 'https://picsum.photos/400/300?random=1'
				},
				{
					id: 2,
					title: '天坛公园',
					keywords: '世界文化遗产',
					info: '明清两代皇帝祭天的场所',
					district: '东城区',
					price: 15,
					rate: 4.7,
					visit_count: 98500,
					distance: '3.5km',
					image: 'https://picsum.photos/400/300?random=2'
				},
				{
					id: 3,
					title: '颐和园',
					keywords: '皇家园林·世界遗产',
					info: '中国现存规模最大的皇家园林',
					district: '海淀区',
					price: 30,
					rate: 4.9,
					visit_count: 156200,
					distance: '8.2km',
					image: 'https://picsum.photos/400/300?random=3'
				}
			];
		}
		
		console.log(`✅ 已加载 ${this.nearbyScenicList.length} 个模拟景点`);
	},
	
	// 计算两点之间的距离（Haversine公式）
	calculateDistance(lat1, lon1, lat2, lon2) {
		const R = 6371; // 地球半径（公里）
		const dLat = this.toRad(lat2 - lat1);
		const dLon = this.toRad(lon2 - lon1);
		const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
			Math.cos(this.toRad(lat1)) * Math.cos(this.toRad(lat2)) *
			Math.sin(dLon / 2) * Math.sin(dLon / 2);
		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		return R * c;
	},
	
	// 角度转弧度
	toRad(degrees) {
		return degrees * Math.PI / 180;
	},
	
	// 格式化数字（例如：1.2万）
	formatCount(count) {
		if (!count) return '0';
		if (count < 10000) return count.toString();
		return (count / 10000).toFixed(1) + '万';
	},
	
	// 跳转到景点详情页
	toScenicDetail(item) {
		uni.navigateTo({
			url: `/pages/scenic/detail?id=${item.id}`
		});
	},
	
	// 查看更多景点
	toScenicList() {
		uni.navigateTo({
			url: '/pages/scenic/list'
		});
	}
}
}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.container{
		background:#fff;
	}
	
	/* 附近景点推荐样式 */
	.nearby-scenic {
		padding: 30rpx 24rpx;
		background: #f7f8fa;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}
	
	.section-title {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		
		.title-icon {
			font-size: 36rpx;
			margin-right: 12rpx;
		}
	}
	
	.more-btn {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #999;
		
		.arrow {
			font-size: 36rpx;
			margin-left: 4rpx;
		}
	}
	
	.scenic-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}
	
	.scenic-card {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}
	
	.scenic-image {
		width: 240rpx;
		height: 200rpx;
		flex-shrink: 0;
	}
	
	.scenic-info {
		flex: 1;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.scenic-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.scenic-desc {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.scenic-meta {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 12rpx;
		
		.meta-item {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #666;
			
			&.price {
				margin-left: auto;
				color: #ff6b35;
				font-weight: bold;
				
				.price-symbol {
					font-size: 20rpx;
				}
				
				.price-value {
					font-size: 28rpx;
				}
			}
		}
		
		.rate-icon,
		.view-icon {
			margin-right: 4rpx;
		}
		
		.rate-text {
			color: #ff9800;
			font-weight: bold;
		}
	}
	
	.scenic-location {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #999;
		
		.location-icon {
			margin-right: 4rpx;
		}
	}
	
	.hot{
		margin:10rpx auto 20rpx;
	}
	.left-item{
		display: flex;
		align-items: center;
		image{
			width: 40rpx;
			height: 40rpx;
			margin:0 10rpx;
		}
		text{
			width:90rpx;//固定宽度
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
		}
	}
	.t-icon{
		width: 60rpx;
		height: 60rpx;
		background-repeat: no-repeat;
	}
	.u-demo {
		//height: 200vh;
		height: calc(100% - 44px);
		height: calc(100% - 44px - constant(safe-area-inset-top));
		height: calc(100% - 44px - env(safe-area-inset-top));
	}
	
	.wrap {
		padding: 24rpx;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
		// filter:drop-shadow(10rpx 10rpx 4rpx rgba(0,0,0,.05))
		box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
		background-color: #fff;
		border-radius: 56rpx;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.message-box {
		
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		background-color: rgba(240,240, 240, 0.35);
		color: #fff;
		font-size: 22rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
</style>

